import React, { Component } from 'react';
import { Row, Col, Timeline, Card, Button } from 'antd';
import {routerRedux} from "react-router-dom";
import router from 'umi/router';
import { connect } from 'dva';
import './log.less';
import moment from 'moment';

interface bastType {
  key: string;
  value: string;
}

const bastTop: Array<bastType> = [
  { key: '协议版本号', value: 'protocolVersion' },
  { key: '设备 VIN', value: 'vin' },
  { key: '设备 VIN标识', value: 'vinTag' },
  { key: '消息ID', value: 'messageId' },
  { key: '服务类型', value: 'serviceType' },
  { key: '消息类型', value: 'messageType' },
  { key: '消息发送时间', value: 'timeStamp' },
  { key: '消息版本号', value: 'messageProtocolVersion' },
  { key: '数据长度', value: 'contentSize' },
  { key: '唯一流水号', value: 'serialNumber' },
];
const bastBottom: bastType[] = [{ key: '原始报文', value: 'bodyHexStr' }];
class resource_show extends Component<any> {
  state = {
    type: 'requestData',
    itemList: [], 
  }

  rightList = {
    // 连接平台下发配置指令
    dcvpRequest: [...bastTop, ...bastBottom],
    // tbox回复版本信息
    tboxVersion: [
      ...bastTop,
      { key: 'T-Box硬件版本', value: 'hardwareVersion' },
      { key: 'T-Box软件版本', value: 'softwareVersion' },
      ...bastBottom,
    ],
    // 连接平台回复版本信息
    dcvpVersion: [
      { key: '车辆VIN码', value: 'vin' },
      { key: '回复版本信息时间', value: 'subTime' },
      { key: '回复版本信息', value: 'msgType' },
      { key: '流水号', value: 'bsnIndex' },
    ],
    // tsp下发配置参数
    tspConfig: [
      { key: '车辆VIN码', value: 'vin' },
      { key: '下发配置时间', value: 'reqTime' },
      { key: '下发配置参数', value: 'msgType' },
      { key: '流水号', value: 'bsnIndex' },
    ],
    // 连接平台下发配置参数
    dcvpConfig: [
      ...bastTop,
      { key: '网络监控计时器T1max', value: 'config1' },
      { key: '整车网络异常计数器Cmax', value: 'config2' },
      { key: '唤醒计数器Cwakeupmax', value: 'config3' },
      ...bastBottom,
    ],
    // tbox回复配置结果
    tboxResult: [
      ...bastTop.slice(0, -1),
      { key: '唯一流水号', value: 'uniquePipelineNumber' },
      { key: '配置执行结果', value: 'configSettingResult' },
      ...bastBottom,
    ],
    // 连接平台回复配置结果
    dcvpResult: [
      { key: '车辆VIN码', value: 'vin' },
      { key: '回复配置结果时间', value: 'subTime' },
      { key: '回复配置结果', value: 'msgType' },
      { key: '流水号', value: 'bsnIndex' },
    ],
    // TSP下发请求
    requestData: [
      { key: '车辆VIN码', value: 'vin' },
      { key: '配置类型', value: 'configType' },
      { key: '请求时间', value: 'requestTime' },
      { key: '请求参数', value: 'requestParam' },
      { key: '流水号', value: 'serialNum' },
    ],
    // 下发唤醒短信
    smsData: [
      { key: 'VIN码', value: 'vin' },
      { key: 'SIM卡号', value: 'simNo' },
      { key: '短信内容', value: 'smsContent' },
      { key: '短信发送时间', value: 'smsTime' },
      { key: '短信发送结果', value: 'smsResult' },
    ],
  };
  leftList = [
    {
      key: 'requestData',
      title: 'TSP-->连接平台',
      p: '下发请求',
    },
    {
      key: 'smsData',
      title: '连接平台-->TBOX',
      p: '下发唤醒短信',
    },
    {
      key: 'dcvpRequest',
      title: '连接平台-->TBOX',
      p: '下发配置指令',
    },
    {
      key: 'tboxVersion',
      title: 'TBOX-->连接平台',
      p: '回复版本信息',
    },
    {
      key: 'dcvpVersion',
      title: '连接平台-->TSP',
      p: '回复版本信息',
    },
    {
      key: 'tspConfig',
      title: 'TSP-->连接平台',
      p: '下发配置参数',
    },
    {
      key: 'dcvpConfig',
      title: '连接平台-->TBOX',
      p: '下发配置参数',
    },
    {
      key: 'tboxResult',
      title: 'TBOX-->连接平台',
      p: '回复配置结果',
    },
    {
      key: 'dcvpResult',
      title: '连接平台-->TSP',
      p: '回复配置结果',
    },
  ];
  configList = {
    5: '蓝牙钥匙',
    6: '通用配置修改',
    7: 'CAN网络异常监控参数配置',
    8: '金融授信参数配置',
  };
  componentDidMount() {
    const { location, id } = this.props;
    const { query } = location || {};
    const newId = query?.id || id;

    if (newId) {
      this.getListFn(newId);
    }
  }
  getListFn = (id: number) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'http/getData',
      payload: { url: '/connectLog/configLogDetail', id },
      callback: (res: any) => {
        const data = res?.data;
        const {
          requestTime,
          requestParam,
          serialNum,
          configType,
          simNo,
          smsContent,
          smsTime,
          smsResult,
          vin,
        } = data;
        const list = {};
        this.leftList.forEach(e => {
          // 过滤json字符串
          try {
            const obj = JSON.parse(data[e.key]);
            list[e.key] = obj;
          } catch (err) {}
        });
        // 开始2个属性
        Object.assign(list, {
          requestData: {
            requestTime,
            requestParam,
            serialNum,
            configType,
            vin,
          },
          smsData: {
            simNo,
            smsContent,
            smsTime,
            smsResult,
            vin,
          },
        });

        // 赋值 数组
        // 显示那个类型
        this.setState({
          // type: 'requestData',
          itemList: list,
        });
      },
    });
  };
  btnClick = (item: any) => {
    // 修改数据
    // 修改状态
    this.setState({
      type: item.key,
    });
  };
  // 修改状态
  get columnCount() {
    const { type } = this.state;
    // 连接平台下发配置指令、 TBOX回复版本信息
    const arr = ['dcvpRequest', 'tboxVersion', 'dcvpConfig', 'tboxResult'];
    return arr.includes(type);
  }

  getTimeFn = (key: string) => {
    const { itemList } = this.state;
    const el = itemList[key];
    const obj = { ...el?.data?.header, ...el?.data?.body, ...el };
    const arr = Object.keys(obj);
    const i = arr.length
      ? arr.find((e: string) => {
          if (e.search(/time/i) >= 0) {
            return e;
          }
        })
      : '';

    return i && obj[i]
      ? obj[i].indexOf(':') > -1
        ? obj[i]
        : moment(obj[i] * 1000).format('YYYY-MM-DD HH:mm:ss')
      : '';
  };

  goBack = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push({ pathname: '/connectPlat/vehicleConfigLogQuery', sourcePage: 'vehicleConfigLogQueryDetail' }));
  }

  render() {
    const { itemList, type } = this.state;
    const textFn = (type: string = '', val: string = '') => {
      const el = itemList[type];
      const obj = { ...el?.data?.header, ...el?.data?.body, ...el };
      let str = '';
      switch (val) {
        case 'configType':
          str = this.configList[obj[val]] || obj[val];
          break;

        default:
          !obj[val] && console.log(`缺少参数--${val}`);
          str = obj[val] || ``;
          break;
      }
      if (val.search(/time/i) > -1 && obj[val]) {
        obj[val].indexOf(':') > -1
          ? str = obj[val]
          : str = moment(obj[val] * 1000).format('YYYY-MM-DD HH:mm:ss');
          console.log(obj);
          
      }

      return str;
    };
    return (
      <Card style={{ padding: '20px', minWidth: '1200px' }}>
        <Row justify="space-between">
          <Col span={6}>
            <Timeline mode="left">
              {this.leftList.map((item, i) => (
                <Timeline.Item
                  key={item.key}
                  label={this.getTimeFn(item.key)}
                  color={item.key === type ? 'blue' : this.getTimeFn(item.key) ? 'green' : 'gray'}
                >
                  <div onClick={() => this.btnClick(item)}>
                    <p>{item?.title}</p>
                    <p>{item?.p}</p>
                  </div>
                </Timeline.Item>
              ))}
            </Timeline>
          </Col>
          <Col span={16}>
            {type && (
              <div className={`desc-box ${this.columnCount ? 'desc-flex' : ''}`}>
                {this.rightList[type].map((item: any) => {
                  const arr = ['原始报文', '唤醒计数器Cwakeupmax'];
                  return (
                    <div
                      className={`desc-item ${arr.includes(item.key) ? 'flex-3' : ''}`}
                      key={item.key}
                    >
                      <div className="desc-item-fl">{item?.key}</div>
                      <div className="desc-item-fr">{textFn(type, item?.value)}</div>
                    </div>
                  );
                })}
              </div>
              // <Descriptions bordered column={this.columnCount}>
              //   {this.rightList[type].map((item: any) => (
              //     item.key && <Descriptions.Item
              //       key={item.key}
              //       label={item?.key}
              //       span={item.key === '原始报文' ? 3 : 1}
              //     >
              //       {item.key === '原始报文'? 4 : 1}
              //       {item?.value}
              //     </Descriptions.Item>
              //   ))}
              // </Descriptions>
            )}
          </Col>
        </Row>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <Button
            type="primary"
            onClick={() => {
              this.goBack();
              /* if (this.props.onBack) {
                this.props.onBack && this.props.onBack();
                return false;
              }
              router.goBack(); */
            }}
          >
            关闭
          </Button>
        </div>
      </Card>
    );
  }
}
const mapStateToProps = () => {
  return {};
};
export default connect(mapStateToProps)(resource_show);
